<template>
  <view class="px-4">
    <!--明细-->
    <view class="py-3 flex justify-between items-center border-bottom" @click="handleShrink(dataSource.type)">
      <view>
        <view class="text-rose-600" v-if="dataSource.type == 10">+{{ dataSource.coin }} 金币</view>
        <view class="text-gray-500" v-if="dataSource.type == 20">{{ dataSource.coin }} 金币</view>
      </view>

      <view class="ml-auto">
        <view class="text-xs text-slate-400">{{ moment(dataSource.add_time * 1000).format('YYYY/MM/DD HH:mm:ss') }}</view>
      </view>

      <view v-if="dataSource.send_user">
        <image class="w-4 h-4 block" src="@/static/image/rt.png"></image>
      </view>
    </view>

    <transition name="shrink-move">
      <view v-show="transShow" class="box" v-if="dataSource.send_user">
        <view class="px-4 pb-1 text-sm text-slate-400">派给 {{ dataSource.send_user.length }}人</view>

        <view class="flex justify-between items-center px-4 mt-1" v-for="itex in dataSource.send_user">
          <view>
            <image class="w-8 h-8 rounded-full" :src="itex.avatar"></image>
          </view>
          <view class="ml-2 text-sm text-slate-400">{{ itex.nickname }} ({{ itex.uid }})</view>
        </view>

      </view>
    </transition>


  </view>
</template>

<script setup lang="ts">
    import { ref } from 'vue'
    import moment from "moment/moment";
    const props = defineProps({
      dataSource: {
        type: Object as any,
        default: () => {}
      }
    })

    const transShow = ref<boolean>(false)

    const handleShrink = (type) => {
      if( type == 10 ) return
      transShow.value = !transShow.value
    }


</script>

<style scoped lang="scss">
.box {
  padding: 10rpx 0;
  border: 2rpx solid #e5e7e9;
  border-top: 0;
  overflow-y: hidden;
}

.shrink-move-enter-active, .shrink-move-leave-active {
  transition: opacity .5s;
}
.shrink-move-enter-from, .shrink-move-leave-to {
  opacity: 0;
}
</style>
